<template>
  <div class="top-bar wow animate__animated animate__fadeInDown">
    <div class="qiehuan">
      <span @click="changeLang" :style="{ cursor: 'pointer' }">{{
        $t('otc_failure_0047')
      }}</span>
    </div>
    <div class="box">
      <div>
        <img src="../../../assets/images/logo.png" alt="" />
      </div>
      <div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#FFFFFF"
          text-color="#1E1E1E"
          active-text-color="#7E7E7E"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">交易</template>
            <el-menu-item index="2-1">交易产品</el-menu-item>
            <el-menu-item index="2-2">交易账户</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">LAB 与工具</template>
            <el-menu-item index="3-1">数据中心</el-menu-item>
            <el-menu-item index="3-2">交易工具</el-menu-item>
            <el-menu-item index="3-3">学习中心</el-menu-item>
          </el-submenu>
          <el-menu-item index="4">合作伙伴</el-menu-item>
          <el-submenu index="5">
            <template slot="title">关于 RI FULL</template>
            <el-menu-item index="5-1">RI FULL介绍</el-menu-item>
            <el-menu-item index="5-2">FAQ</el-menu-item>
          </el-submenu>
          <el-menu-item index="6">免费开户</el-menu-item>
          <el-menu-item index="7">登录</el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>
<script>
// <div class="top-bar wow animate__animated animate__fadeIn">
export default {
  name: 'topBar',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect(key) {
      let map = {
        '1': '/',
        '2-1': '/tradeProducts',
        '2-2': '/tradeAccount',
        '3-1': '/dataCenter',
        '3-2': '/tradTool',
        '3-3': '/learnCenter',
        '4': '/partners',
        '5-1': '/RI',
        '5-2': '/FAQ',
        '6': '/freeAccount',
        '7': '/login'
      }
      this.$router.push(map[key])
    },
    changeLang() {
      const temp = this.$i18n.locale
      if (temp === 'cn') {
        this.$i18n.locale = 'en'
      } else {
        this.$i18n.locale = 'cn'
      }
    }
  }
}
</script>
<style scoped>
.top-bar {
  background: #fff;
  min-width: 1075px;
}
.qiehuan {
  height: 37px;
  background-color: rgba(108, 16, 15, 0.87) !important;
  font-size: 20px;
  color: #fff;
  padding: 0 11%;
  text-align: right;
  line-height: 37px;
}
.el-menu--horizontal {
  margin: 0 auto;
  border-bottom: none;
  background: #fff;
  color: #1e1e1e !important;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
  font-size: 16px !important;
  background: #fff;
  color: #1e1e1e !important;
}
.el-menu--horizontal >>> .el-submenu .el-submenu__title {
  font-size: 16px;
  background: #fff;
  color: #1e1e1e !important;
}
.box {
  display: flex;
  width: 80%;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
</style>
